<template>
  <div style="text-align: left;">
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="1">录播课程</el-menu-item>
    </el-menu>
    <el-row v-for="(item,index) in aaa" :key="index"
            style="border-bottom: #cccccc solid 1px;padding-top: 10px;padding-bottom: 10px" type="flex" justify="start">
      <el-col :span="20" class="course_content">
        <div style="display: inline-block; float: left; margin: 5px;">
          <img :src="item.courseCover" class="avatar">
        </div>
        <div style="display: inline-block; float: left">
          <div style="margin-left: 10px;">
            <p class="course_name">{{ item.courseName }}</p>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="bg-purple">
          <!--<el-button type="info" plain>进入学习</el-button>-->
          <br>
          <el-link :underline="false" @click="handleCancel(item.id)">取消收藏</el-link>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import qs from 'qs'
export default {
  name: "MyCollection",
  data() {
    return {
      aaa: [],
      activeIndex: '1',
      courseCover: '',
      userId:''
    }
  },
  methods: {
    findAll(){
      let uid =sessionStorage.getItem("uid");
      this.$axios2.post("student/stu/user-favorites/findAll",qs.stringify({userId:uid})).then(r=>{
          this.aaa=r.data;
      })
    }
    ,
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    handleCancel(id){
      this.$confirm('您确定不再收藏该课程了吗？', {
        confirmButtonText: '确定',
        cancelButtonText: '再想想',
        type: 'warning'
      }).then(() => {
        this.$axios2.post("student/stu/user-favorites/del",qs.stringify({id:id})).then(r=>{
          if(r.data){
            this.$message({
              message:'取消成功，再看看其他课程吧',
              type:'success'
            });
            this.findAll();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '明智的选择！'
        });
      });
    }
  }, created(){
    this.findAll();
  }
}
</script>

<style scoped>
.avatar {
  width: 180px;
  height: 100px;
  display: block;
  margin-left: 10px;
}

.course_content p {
  height: 40px;
  margin-top: 5px;
  margin-bottom: 5px;
  line-height: 20px;
}

.course_name {
  font-size: 16px;
  left: 205px;
  color: #999;
}

.el-row--flex {
  margin-bottom: 0;
}
</style>
